<template>
    <div>
        <div class="bjtk spqd_tk">
            <div class="close" @click="close">
                    <a-icon type="close" />
            </div>
            <div class="tilte_box">
                <div class="bjd_tit">
                    <span class="cz_title">商品清单</span>
                    <span class="cz_title_border"></span>
                </div>
            </div>
                <div class="xsdxq_box">
                        <a-table
                        @change="getyundanDetailInfo"
                        :loading="loading"
                        :columns="columns"
                        :pagination="pagination"
                        :dataSource="data"
                        :rowKey="(record,index)=>{return index}"
                        >
                        <template slot="XL" slot-scope="text, record,">
                            <div  class="xl_yc yc" >
                                    <a-tooltip placement="topLeft" :title="record.XL">{{record.XL}}
                                    </a-tooltip>
                                </div>
                        </template>
                        </a-table>
                    <div class="xsdxq_list">
                        <span style="text-align:right">数量合计：<span  class="sl_style_1 sl_style">{{zxhsl}}</span></span>
                    </div>
                </div>
        </div>
    </div>
</template>
<script>
import qs from "qs";
import moment from 'moment';
const columns =[
     {
        title:"商品名称",
        dataIndex: "XLQZ",
        className:'XLQZ_colme',
        // fixed:'left',
        // scopedSlots: {
        //     customRender: "xlqz" ,
        //     filterDropdown: 'filterSpmcDropdown',
        //     filterIcon: 'filterIcon',
        // },
        width:90,
    },
    {
        title:"型号规格",
        dataIndex: "XL",
        className:'xl_colme',
        scopedSlots: { customRender: "XL" },
        width:90
    },
    {
        title:"品牌",
        dataIndex: "SCCJC",
        className:'sccjc_colme'
    },
    {
        title:"销货数量",
        dataIndex: "XHSL",
        className:"sl_style"
    },
    {
        title:"库房名称",
        dataIndex: "KFMC",
        width:90,
    },
    {
        title:"货位名称",
        dataIndex: "HWMC",
    },

    
]
export default {
   
    data(){
        return{
            moment,
            // 表格数据
            data:null,
            columns,
            loading:true,
            // 销售单号
            xsdh:'',
            // 单位名称
            dwmc:'',
            // 公司编码
            gsbm:'',
            // 授权id
            sqdwid:'',
            //数据库名称
            database:'ERP2_BEARING',
            // ip地址
            ip:'122.112.240.180',
            // 分页
            pagination: {
                defaultPageSize: 6,
                current: 1,
                showTotal: total => `共 ${total} 条数据`,
                total:0
            },
            // 控制保存成功
            isSave:false,
            // 销售单状态
            shbj:'',
            // 制单日期
            zdrq:'',
            // 客户名称
            dwmc:'',
            // 制单人 
            zdr:'',
            // 收货人
            fhlxr:'',
            // 数量合计
            zxhsl:'',
            // 型号规格
            xl:'',
            // 商品名称
            xlqz:'',
            // 品牌
            sccjc:'',
            // 销货数量
            xhsl:'',
            // 库房名称
            kfmc:'',
            // 货位名称
            hwmc:'',
            // 任务人
            rwr:'',

        }
    },

    methods:{
        //关闭弹出框
        close() {
            this.$store.state.tjwz = false;
        },
        //获取运输单号详情
        getXsdinfo(){
            console.log(JSON.parse(sessionStorage.getItem('xsdxq')))
            this.xsdh=JSON.parse(sessionStorage.getItem('xsdxq')).XSDH
            this.shbj=JSON.parse(sessionStorage.getItem('xsdxq')).SHBJ
            this.dwmc=JSON.parse(sessionStorage.getItem('xsdxq')).DWMC
            this.zdr=JSON.parse(sessionStorage.getItem('xsdxq')).ZDR
            this.shr=JSON.parse(sessionStorage.getItem('xsdxq')).FHLXR
            this.zxhsl=JSON.parse(sessionStorage.getItem('xsdxq')).ZXHSL
            this.rwr=JSON.parse(sessionStorage.getItem('xsdxq')).RWR
        },
        // 获取运单详情信息
        getyundanDetailInfo(pagination){
            this.pagination.current = pagination.current;
            // 发送axios
            this.axios
            .post(
                'https://yb.bearing.cn/wxapi/smt_newkfbhsDetail.php',
                qs.stringify({
                        page:this.pagination.current,
                        pageSize:this.pagination.defaultPageSize,
                        xsdh:this.xsdh,
                        token:sessionStorage.getItem('smt_token'),
                    })
            ).then(res=>{
                console.log(res);
                if (res.data.code == 103) {
                    this.data=res.data.result.data
                    this.loading=false;
                    this.isShow=true;
                    this.pagination.total = Number(res.data.result.num);
                    // this.xl=res.data.result.data[0].XL;
                    // this.xlqz=res.data.result.data[0].XLQZ;
                    // this.sccjc=res.data.result.data[0].SCCJC;
                    // this.xhsl=res.data.result.data[0].XHSL;
                    // this.kfmc=res.data.result.data[0].KFMC;
                    // this.hwmc=res.data.result.data[0].HWMC
                }else{
                    this.pagination.total=Number(0);
                    this.data=[];
                    this.loading=false;
                    this.isShow=false;
                }
            })

        },
    },
    created(){
        this.getXsdinfo();
        this.getyundanDetailInfo(this.pagination);
    }
}
</script>

<style lang='less'>
.spqd_tk{
        padding: 0!important;
        .close{
            position: absolute;
            top: -3px;
            right: 0px;
            font-size: 24px;
            width: 50px;
            height: 50px;
            cursor: pointer;
        }
        .XLQZ_colme{
            width: 70px;
        }
        .ymInfo_colme{
            width: 128px;
        }
        .xl_colme{
            width: 150px;
        }
        .sccjc_colme{
            width: 70px;
        }
        .tilte_box{
                border-bottom: 0!important;
                padding: 40px 40px 10px;
                text-align: left;
                margin-bottom: 0;
                height: 87px;
                line-height: 22px;
                .cz_title{
                    display: block;
                    width: 13%;
                    color: #1890ff;
                    text-align: center;
                    height:21px;
                    }
                    .cz_title_border{
                    display: inline-block;
                    width: 13%;
                    height: 2px;
                    background-color: #1890ff;
                    }
            }
        .xsdxq_list{
            display: inline-block;
            position: relative;
            top: -60px;
            left: -42%;
            width: 50%;
           
        }
        .list_btn{
            text-align: center;
            position: absolute;
            bottom: 20px;
            left: 50%;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }  
    }
    .bjtk {
        position: absolute;
        top: 5%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        width: 57%!important;
        height: 600px;
        background: #fff;
                .xsdxq_list{
                    display: inline-block;
                    position: relative;
                    top: -80px;
                    left: 0%;
                    width: 28%;
                    padding:0 16px;
                    margin: 10px 0;
                    display: flex;
                    background-color: #fff;
                    // justify-content: space-around;
                    text-align: left;
                    flex-wrap: wrap;
                    span{
                        display: inline-block;
                        text-align: left;
                        width:50%;
                    }
                    .sl_style_1{
                        display: inline;
                    }
                    .tit {
                        display: inline-block;
                        width: 80px;
                        text-align: right;

                        i {
                            color: #ff0000;
                            padding: 0 4px;
                        }
                    }

                    .radio {
                        margin-left: 10px;
                    }

                    .text {
                        width: 288px;
                        vertical-align: top;
                    }


                }
                .xsdxq_box{
                    text-align: left;
                    border-radius: 10px;
                    max-height: 400px;
                    // background-color: #f3f7f9;
                    padding: 10px;
                    // margin-top: 40px;
                    // .xsdxqList {
                    //     text-align: left;
                    //     padding: 10px 20px;
                    //     margin-bottom: 10px;
                    //     box-shadow: 0 0 5px #ccc;
                    //     margin: 10px 20px;
                    //     border-radius: 10px;
                    // }
                    .ant-table-wrapper{
                        background: #fff;
                    }
                    .ant-table-body{
                        min-height: 300px!important;
                        background-color: #f3f7f9;
                    }
                    .ant-table-header{scrollbar-color:transparent transparent}
                    .ant-table-header::-webkit-scrollbar{background-color:transparent}
                    .ant-table td { 
                        white-space: nowrap; 
                    }
                }
                .bcloading{
                    position: relative;
                    left: 42%;
                    bottom: 214px;
                }
                .list_btn {
                    text-align: center;

                    button {
                        width: 200px;
                        height: 40px;
                    }
                }
    }
</style>
